<template>
  <div class="page-cont">
    <van-nav-bar
      title="修改生产计划"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="list">
      <action-select
        v-model="form.bridgeId"
        title="桥梁名称"
        :list="preData.bridge"
        label="bridgeName"
        value="id"
      />
      <action-select
        v-model="form.bridgeLocation"
        title="桥梁部位"
        :list="bridgeLocationOption"
      />

      <div class="b" />
      <van-field
        label="梁片总数"
        placeholder="请输入"
        type="number"
        input-align="right"
        v-model="form.sliceNum"
      />
      <div class="b" />

      <van-cell
        is-link
        :value="showGmtStart"
        @click="selectStartTime"
      >
        <template #title>
          <span class="custom-title">开始时间</span>
        </template>
      </van-cell>

      <van-cell
        is-link
        :value="showGmtEnd"
        @click="selectEndTime"
      >
        <template #title>
          <span class="custom-title">结束时间</span>
        </template>
      </van-cell>

      <van-action-sheet
        v-model="showTimePicker"
      >
        <!-- :title="timePickerType == 'start' ? '开始时间' : '结束时间'" -->
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          @confirm="timeSelectConfirm"
          @cancel="showTimePicker = false"
        />
      </van-action-sheet>
    </div>
    <van-button
      class="bottom"
      type="info"
      block
      @click="submitData"
    >
      提交
    </van-button>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { mapState } from "vuex";
export default {
  name: "PlanAppendPage",
  data() {
    return {
      currentDate: new Date(),
      timePickerType: "",
      showTimePicker: false,
      bridgeLocationOption: [
        {
          label: "左幅",
          value: 1,
        },
        {
          label: "右幅",
          value: 2,
        },
      ],
      form: {
        // 桥梁ID
        bridgeId: "",
        // 桥梁部位
        bridgeLocation: null,
        // 梁片数量
        sliceNum: null,
        // 开始时间
        gmtStart: "",
        // 结束时间
        gmtEnd: "",
        // // 是否跳过节假日
        // overHoliday: false,
        // // 计划生产顺序
        // workOrder: '',
      },
      // 桥梁弹出窗是否可见
      bridgeActionShow: false,
      // 侨梁位置弹窗是否可见
      bridgeLocaActionShow: false,
    };
  },
  watch: {
    showTimePicker() {
      if (!this.showTimePicker) {
        this.timePickerType = ''
      }
    },
  },
  computed: {
    // 预加载数据
    ...mapState({ preData: (state) => state.pre }),
    showBridgeName() {
      if (this.form.bridgeId) {
        return this.preData.bridge.find(
          (item) => item.id === this.form.bridgeId
        ).bridgeName;
      } else {
        return "请选择";
      }
    },
    showBridgeLocation() {
      if (this.form.bridgeLocation) {
        return this.bridgeLocationOption.find(
          (item) => item.value === this.form.bridgeLocation
        ).label;
      } else {
        return "请选择";
      }
    },
    showGmtStart() {
      if (this.form.gmtStart) {
        return this.$options.filters.timeDate(this.form.gmtStart);
      } else {
        return "请选择";
      }
    },
    showGmtEnd() {
      if (this.form.gmtEnd) {
        return this.$options.filters.timeDate(this.form.gmtEnd);
      } else {
        return "请选择";
      }
    },
  },
  created() {
    let data = JSON.parse(this.$route.query.json)
    this.$set(this, 'form', data)
  },
  methods: {
    selectBridge(data) {
      this.bridgeActionShow = false;
      this.form.bridgeId = data.id;
    },
    selectBridgeLocation(val) {
      this.bridgeLocaActionShow = false;
      this.form.bridgeLocation = val;
    },
    selectStartTime() {
      // 设置时间
      this.currentDate = new Date()
      if (this.form.gmtStart) {
        this.currentDate = new Date(this.$options.filters.timeDate(this.form.gmtStart))
      }

      this.timePickerType = 'start'
      this.showTimePicker = true
    },
    selectEndTime() {
      // 设置时间
      this.currentDate = new Date()
      if (this.form.gmtEnd) {
        this.currentDate = new Date(this.$options.filters.timeDate(this.form.gmtEnd))
      }

      this.timePickerType = 'end'
      this.showTimePicker = true
    },
    timeSelectConfirm(val) {
      if (this.timePickerType == 'start') {
        this.form.gmtStart = dayjs(val).format('YYYYMMDDHHmmss')
      } else if (this.timePickerType == 'end') {
        this.form.gmtEnd = dayjs(val).format('YYYYMMDDHHmmss')
      }
      this.showTimePicker = false
    },
    async submitData() {
      // 判断
      if (!this.form.bridgeId) return this.$toast.fail('请选择桥梁');
      if (!this.form.bridgeLocation) return this.$toast.fail('请选择桥梁部位');
      if (!this.form.sliceNum) return this.$toast.fail('请输入梁片数量');
      if (!this.form.gmtStart) return this.$toast.fail('请选择开始时间');
      if (!this.form.gmtEnd) return this.$toast.fail('请选择结束时间');

      this.$toast.loading({  message: '加载中...', forbidClick: true });
      await this.api.EDIT_PLAN(this.form)
      this.$toast.clear()
      this.$router.back()
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.action-item {
  padding: 15px;
  text-align: center;
  font-size: 16px;
  &:active {
    background-color: #eee;
  }
}
::v-deep {
  .van-picker__toolbar {
    height: 60px;
    button {
      font-size: 16px;
      padding: 0 20px;
    }
  }
}
</style>
